<template>
	<view class="page">
		 
		<view class="list">
			<view class="tabs-label">
				
				<view :class="[tab2?'call-1-label':'call-2-label']" @click="tab2Method">
					<label>采购收藏</label>
				</view>
				<view :class="[tab3?'call-1-label':'call-2-label']" @click="tab3Method">
					<label>货源收藏</label>
				</view>
			</view>
			
			
		
			<view v-if="tab2">
				<scroll-view class="order-scroll-view-H"   >
					<view class="order-scroll-view-item center"  v-for="item in orders" :key="item.id">
						<view class="order-scroll-view_H-tab3">
							<view class="order-call-select2" >
								 <view class="order-scroll-view_H-tab3-call-3-label-1">
										<label :class="[item.purchase === '0'?'order-type-image':'order-type-image-0']" >{{item.purchase === '0' ? "预购" : "急购"}}</label>
									<label class="order-type-image-name">{{item.shopName}}</label>
									<label class="order-type-image-name2">{{item.createDate}}</label>
								 </view>
							</view>
							<view class="order-call-select2">
								 <view class="order-scroll-view_H-tab3-call-3-label-1">
									 
									<label class="order-icon-image">采购量：</label>
									<label class="order-dun">{{item.shopPurchaseNum}} {{item.shopPurchaseNumUnit}}</label>
									<label class="order-chandi">产地要求：</label>
									<label class="order-city">{{item.address}}</label>
								 </view>
							</view>
							<view class="order-call-select2">
								 <view class="order-scroll-view_H-tab3-call-3-label-1">
									<label class="order-icon-image">采购价格：</label>
									<label class="order-dun">{{item.purchasePrice}} 元/{{item.purchasePriceUnit}}</label>
									<label class="order-chandi">采购截止：</label>
									<label class="order-city">{{item.purchaseEndDayStr}}</label>
								 </view>
							</view>
							<view class="order-call-select2" @click="goToDetail(item.id)">
								 <view class="order-scroll-view_H-tab3-call-3-label-1">
									<view class="order-nameBtn" @click="call(item)">抢先联系</view>
									<view class="order-nameBtn2" @click="wxContact()" >平台咨询</view>
									<view class="order-nameBtn3" @click="goToDetail(item.id)" >一键分享</view>
								 </view>
							</view>
							<view class="order-call-select2" @click="goToDetail(item.id)">
								 <view class="order-scroll-view_H-tab3-call-3-label-1"  >
									<label class="order-call-times">您设置的沟通次数今日剩余: {{item.preUser.callLimitNum-item.preUser.callNumToday}} 次</label>
									<!-- <view class="order-detailBtn">详情</view> -->
								 </view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			 
				
			<!-- 货源 -->
			<view v-if="tab3">
				<scroll-view class="shop-scroll-view-H"  scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltoupper="upper"
				 @scrolltolower="lower">
				 
					<view class="shop-center" v-for="(item, index) in shops" :key="item.id">
				 
						<view class="shop-images"  @click="goToDetail(item.id)">
							<view class="shop-wrap">
								
								<image class="shop-icon-image" :src="item.resourceIds[0]"/>
								<view class="shop-mark">
									<view class="shop-text">共{{item.resourceIds.length}}张</view>
								</view>
								<view class="shop-mark2">
			<view :class="[item.purchase == '1'?'shop-text2-0':'shop-text2']">{{item.purchase == '0' ? "现货" : "预售"}}</view>
								</view>
							</view>
						</view>
						<view class="shop-scroll-view_H-tab3"  @click="goToDetail(item.id)">
							<view class="">
								 <view class="shop-call-row1">
									<label class="shop-call-select-title">{{item.shopName}}</label>
								 	<view class="shop-call-select-img">
										<image  src="../../../static/img/收藏2.png" @click="likeClick(item)"/>
										 
									</view>
								 </view>
								 <view class="shop-call-row2-1">
								 	<label class="shop-call-select2-title">{{item.address}}</label>
									<label class="shop-call-select2-txt">已收藏</label>
								 </view>
								 <view class="shop-call-row2">
								 	  <view  class="shop-call-select3-title">{{item.shopUserType}}</view>
									<view class="shop-call-select3-txt">协助找车</view>
								 </view>
								 
								 <view class="shop-call-row4">
								 	<view  class="shop-call-select4-title">{{item.purchasePrice}} 元/{{item.purchasePriceUnit}}</view>
								 	<view class="shop-call-select2-txt">{{item.purchaseStartDayStr}}</view>
								 </view>
								 <view class="shop-call-row2">
								 	<label class="shop-call-select5-title">简介：{{item.shopDescription}}</label>
								 </view>
							</view>
						</view>
					</view>
				</scroll-view>
				 
			</view>
			
	 	<view class="loadingText">{{loadingText}}</view>	
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/requset.js'
	import operate from '@/common/operate.js'
	import app from '@/App.vue'
	export default {
		data() {
			return {
				tab2:true,
				tab3:false,
				orders:[],
				shops:[],
				page: {
					current: 0,
					size: 10,
					total: 0,
					userId:''
		
				},
				loadingText: '-- 暂无更多 --',
			}
		},
	onLoad() {
		app.navTitle();
		this.page.current = 0;
		this.getPreOrderListByPage();
	},
			 
	onPullDownRefresh() {
		this.page.current = 0
		this.getPreOrderListByPage()
	},
	onReachBottom() {
		this.getMoreList();
	},
	onShow() {
		this.page.current = 0;
		this.getPreOrderListByPage();
	},
	
	methods: {
		call(item){
			//获取沟通次数判断
			//请求登录
			if(uni.getStorageSync("userInfo").id){
				 
			}else{
				uni.navigateTo({
					url: '/pages/loginOnlyPhone/loginOnlyPhone'
				})
				return;
			}
			var header = {},
				data = {
					id:item.preUser.id
				},
				url = "/purchase/preUser/updateCallNumToday", 
				method = "POST";
			if (method) {
				method = method.toUpperCase(); 
				if (method == "POST") {
					header = {
					   'Content-Type': "application/json"
					};
				} else {
					header = {
						'Content-Type': "application/json"
					};
				}	
			}	 
			 uni.request({
				url: operate.api + url,		
				data: data,
				method: method,
				header: header,
				success: (res) => {
					if(res.statusCode && res.statusCode ==200 && res.data.data.callNumToday >= res.data.data.callLimitNum){
						uni.showModal({
						  title: '提示',
						  content: "采购方今日电话被打爆了!"+"已超过对方设置的阀值，请明日再来吧",
						  showCancel:false,
						  success: function (r) {
							  
						  }
						});
					}else{
						uni.makePhoneCall({
							phoneNumber:item.userPhone
						})
					}
				}
			})
		
		},
		
		
		wxContact(){
			uni.navigateTo({
				 url:'/pages/webview/webview'
			});
		},
		
		goToDetail(id) {
			let url = "";
			if(this.tab2){
				url = "/pages/tabbar/tabbar-1/tabbar-1-details/tabbar-1-details?id="+id;
			}
			if(this.tab3){
				 url = "/pages/tabbar/tabbar-2/tabbar-2-details/tabbar-2-details?id="+id;
			}
			uni.navigateTo({
				url
			});
		},
		
		
		getMoreList() {
			console.log("getMore")
			this.loadingText = '-- 正在加载 --'
			this.page.current++;
			this.getPreOrderListByPage()
			 
		 
		},
		getPreOrderListByPage : function() {
			
				this.page.userId = uni.getStorageSync("userInfo").id
				this.page.shopName = this.searchKey
				let urlItem =""
				if(this.tab2){
					urlItem = "Order"
				}
				if(this.tab3){
					urlItem = "Shop"
					
				}
				console.log(urlItem)
				// 请求参数
				var header = {},
					data = this.page,
					url = "/purchase/pre"+urlItem+"/listByPageByLike", 
					method = "POST";
				if (method) {
					method = method.toUpperCase(); 
					if (method == "POST") {
						header = {
						   'Content-Type': "application/json"
						};
					} else {
						header = {
							'Content-Type': "application/json"
						};
					}
				}
			 
				 uni.request({
					url: operate.api + url,		
					data: data,
					method: method,
					header: header,
					success: (res) => {
						if(res.statusCode && res.statusCode ==200){
							console.log(res)
							if(res.data.data){
								var newlist = res.data.data.records;
								if(newlist.length == 0){
									this.loadingText = '-- 暂无更多 --'
								}else{
									if(this.tab2){
										this.orders = this.orders.concat(newlist)
									}else{
										this.shops = this.shops.concat(newlist)
									}
									uni.stopPullDownRefresh()
									this.page.current++;
								}
								 
							}else{
								console.log("load2")
							}
							 
							
						}else{
							console.log("数据状态码！=200")
							this.loadingText = '-- 暂无更多 --'
						}
						
					},fail(res2) {
						this.loadingText = '-- 暂无更多 --'
					},complete() {
						if(this.tab2){
							if(this.orders != null && this.orders.length === 0){
								this.loadingText = '-- 暂无更多 --'
							}
						}else{
							if(this.shops != null && this.shops.length == 0){
								this.loadingText = '-- 暂无更多 --'
							}
						}
				
					}
				})
		},

		goToPage(url) {
			if (!url) return;
			uni.navigateTo({
				url
			});
		},
		switchTab(url) {
			if (!url) return;
			uni.switchTab({
				url
			});
		},
		tab2Method(){
			console.log(0);
			this.tab2 = true;
			this.tab3 = false;
			this.orders=[]
			this.page= {
				current: 0,
				size: 10,
				total: 0
					
			}
			 
			this.getPreOrderListByPage()
		},
		tab3Method(){
			console.log(1);
			this.tab3 = true;
			this.tab2 = false;
			this.shops=[]
			this.page= {
				current: 0,
				size: 10,
				total: 0	
			}
			this.getPreOrderListByPage()
		},
		}
	}
</script>

<style>
	
	
	.page{
		width: 100%;
		font-size: 13px;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 20px;
	 }
 
	 .tabs-label{
	 	text-align: center;
	 	margin-left: 20px;
	 	margin-right: 20px;
	 	margin-top: -30px;
	 	height: 18px;
	 	display: flex;
	 	font-weight: bold;
	 	z-index: 9;
	 }
	 
	 .call-2-label{
	 	flex: 1;
	 	font-weight: bold;
	 	text-align: center;
	 } 
	 .call-2-label image{
	 	height: 12px;
	 	width: 12px;
	 	text-align: center;
	 	margin-left: 5px;
	 }
	 
	 .call-1-label{
	 	flex: 1;
	 	font-size: 16px;
	 	font-weight: 400;
	 	letter-spacing: 0px;
	 	line-height: 20px;
	 	 
	 	 
	 } 
	 .call-1-label uni-label{
	 	font-weight: bold;
	 	color: #D43030;
	 }
	 .call-1-label image{
	 	height: 12px;
	 	width: 12px;
	 	text-align: center;
	 	margin-left: 5px;
	 }
	 .tab2{
	 	flex: 1;
	 	text-align: center;
	 	background-color: white;
	 	 border-radius: 5px 0px 0px 5px;
	 	z-index: 9;
	 }
	 .tab3{
	 	flex: 1;
	 	text-align: center;
	 	background-color: white;
	 	border-radius: 0px 5px 5px 0px;
	 	z-index: 9;
	 }
	 
	 
	 
	 
	 
	 
	 
	 
	 /* 采购 */
	 
 
	.loadingText {
		margin-top: 5px;
		height: 25px;
		line-height: 25px;
		font-size: 10px;
		color: #aaaaaa;
		text-align: center;
		margin-bottom: 60px;
	}
	  
	  
	 .order-scroll-view-H{
	 	background-color: rgba(243, 247, 250, 1);
	 	margin-bottom: 50px;
	 }
	 
	 
	 .order-call-select2{
	 	margin-top: 10px;
	 	font-size: 13px;
	 	
	 }
	 .order-scroll-view_H-tab3{
	 	text-align: center;
	 	background-color: white;
	 	border-radius: 5px 5px 5px 5px;
	 	z-index: 9;
	 	padding: 10px;
	 	margin-top: 10px;
	 }
	 
	 .order-scroll-view_H-tab3-call-3-label-1{
	 	display: flex;
	 	width: 100%;
	 }
	  
	 .order-icon-image{
	 	 border-radius: 25px 25px 25px 25px;
	 	 flex: 2;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 	font-weight: bold;
	  
	 }
	  
	  
	  .order-chandi{
	  	flex:2;
	  	display: flex;
	  	text-align: left;
	  	justify-content: center;
	  	flex-direction: column;
	  	font-weight: bold;
	  }
	 
 
	 .order-nameBtn{
	 	flex:2;
	 	text-align: center;
	 	justify-content: center;
	 	flex-direction: column;
	 	background: #FF8080;
	 	margin-right: 5px;
	 
	 	border-radius: 3px;
	 	color: rgba(255, 255, 255, 1);
	 	height: 25px;
	 	line-height: 25px;
	 	
	 }
	 .order-nameBtn2{
	 	flex:2;
	 	text-align: center;
	 	justify-content: center;
	 	flex-direction: column;
	 	background: #00B2FF;
	 	margin-right: 5px;
	 	margin-left: 5px;
	 	border-radius: 3px;
	 	color: rgba(255, 255, 255, 1);
	 	height: 25px;
	 	line-height: 25px;
	 	
	 }
	 .order-nameBtn3{
	 	flex:2;
	 	text-align: center;
	 	justify-content: center;
	 	flex-direction: column;
	 	background: rgba(67, 207, 124, 1);
	 
	 	margin-left: 5px;
	 	border-radius: 3px;
	 	color: rgba(255, 255, 255, 1);
	 	height: 25px;
	 	line-height: 25px;
	 	
	 }
	 .order-detailBtn{
	 	flex:1;
	 	text-align: center;
	 	justify-content: center;
	 	flex-direction: column;
	 	background: rgba(212, 48, 48, 1);
	 	margin-left: 5px;
	 	border-radius: 3px;
	 	color: rgba(255, 255, 255, 1);
	 	height: 25px;
	 	line-height: 25px;
	 }
	 .order-type-image-0{
	 	border-radius: 5px 25px 25px 5px;
	 	width: 30px;
	 	text-align: left;
	 	margin-top: 4px;
	 	padding: 2px;
	 	height: 15px;
	 	font-weight: bold;
	 	line-height: 13px;
	 	font-size: 13px;
	 	color: rgba(255, 255, 255, 1);
	 	background-color: #D43030;
	 }
	 
	 .order-type-image{
	 	border-radius: 5px 25px 25px 5px;
	 	width: 30px;
	 	text-align: left;
	 	margin-top: 4px;
	 	padding: 2px;
	 	height: 15px;
	 	font-weight: bold;
	 	line-height: 13px;
	 	font-size: 13px;
	 	color: rgba(255, 255, 255, 1);
	 	background-color: #43CF7C;
	 }
	 .order-type-image-name{
	 	width: 150px;
	 	display: flex;
		margin-left: 10px;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 	font-weight: bold;
	 	font-size: 14px;
	 
	 }
	 .order-type-image-name2{
	  
	 	flex: 4;
	 	display: flex;
	 	text-align: right;
	 	justify-content: center;
	 	flex-direction: column;
	 	margin-right: 10px;
	 	color: rgba(204, 204, 204, 1);
	 
	 }
	 .order-dun{
	 	flex:2;
	 	display: flex;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 
	 }
	 .order-city{
	 	flex:2;
	 	display: flex;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 
	 }
	 
	 .order-call-times{
	 	flex: 2;
	 	display: flex;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 	color: rgba(204, 204, 204, 1);
	 }
	 
 
	 
	 
	 
	 
	 
	 
	 
	 /* 货源 */
	 
 
	 	.shop-scroll-view-H{
	 		background-color: rgba(243, 247, 250, 1);
	 	}
	  
	 
	 	  .shop-mark {
	 	    position: absolute;
	 	    right: 50px;
	 	    bottom: 35px;
	 	    margin: 0;
	 	  }
	 	 
	 	  .shop-mark:before {
	 	    content: "";
	 	    position: absolute;
	 	    top: 0;
	 	    left: 0;
	 	    width: 50px;
	 	    z-index: 1;
	 		height: 24px;
	 	    background-color: rgba(206, 3, 5, .7);
	 		border-radius: 5px;
	 	  }
	 	 
	 	  .shop-text {
	 	    color: #FFF;
	 	    display: inline-block;
	 	    position: absolute;
	 	    left: 0;
	 		line-height: 24px;
	 	    z-index: 1;
	 	    font-size: 10px;
	 	    width: 50px;
	 	    text-align: center;
	 	  }
	 	  
	 	  
	 	  
	 	  .shop-mark2 {
	 	    position: absolute;
	 	    top: 5px;
	 	    left: 0;
	 	    margin: 0;
	 	  }
	 	  	 
	 	  .shop-mark2:before {
	 	    content: "";
	 	    position: absolute;
	 	    top: 0;
	 	    left: 0;
	 	    width: 35px;
	 	    z-index: 1;
	 	  	height: 18px;
	 		font-weight: bold;
	 		line-height: 13px;
	 		 
	 		color: rgba(255, 255, 255, 1);
	 		background-color: #43CF7C;
	 	  	border-radius: 5px 25px 25px 5px;
	 	  }
	 	  
	 	  .shop-text2 {
	 	    color: #FFF;
	 	    display: inline-block;
	 	    position: absolute;
	 	    left: 0;
	 	  	line-height: 13px;
	 	    z-index: 1;
	 	    font-size: 13px;
	 	    width: 30px;
	 		padding: 2px;
	 	    text-align: center;
	 	  }
	 	  .shop-text2-0 {
	 	    color: #FFF;
	 	    display: inline-block;
	 	    position: absolute;
	 	    left: 0;
	 	  	line-height: 13px;
	 	    z-index: 1;
	 	    font-size: 13px;
	 	    width: 30px;
	 	  		padding: 2px;
	 	    text-align: center;
	 	  		background-color: #D43030;
	 	  }  
	 
	    .shop-call-row1{
	    	display: flex;
	 		height: 26px;
	    }
	 	.shop-call-row2{
	 		margin-top: 5px;
	 		display: flex;
	 		height: 13px;
	 	}
	 	.shop-call-row2-1{
	 		 
	 		display: flex;
	 		height: 13px;
	 	}
	 	.shop-call-row4{
	 		margin-top: 5px;
	 		display: flex;
	 		height: 26px;
	 	}
	 
	 	.shop-call-select-title{
	 		flex: 1;
	 		font-size: 13px;
	 		line-height: 20px;
	 		color: rgba(42, 47, 51, 1);
	 		font-weight: bold;
	 	}
	 	
	 	.shop-call-select4-title{
	 		padding: 2px;
	 		flex: 1;
	 		font-size: 13px;
	 		line-height: 26px;
	 		color:rgba(254, 141, 32, 1);
	 		font-weight: bold;
	 	}
	 	.call-select-txt{
	 		flex: 1;
	 		line-height:  26px;
	 		margin: 2px;
	 		color: rgba(140, 151, 157, 1);
	 		text-align: right;
	 	}
	 	.shop-call-select-img{
	 		flex: 1;
	 		text-align: right;
	 	}
	 	
	 	
	 	.shop-call-select2-title{
	 		flex: 1.5;
	 		font-size: 12px;
	 		color: rgba(140, 151, 157, 1);
	 		text-align: left;
	 	}
	 	.shop-call-select2-txt{
	 		flex: 0.5;
	 		font-size: 12px;
	 		color: rgba(140, 151, 157, 1);
	 		text-align: right;
	 	}
	 	.shop-call-select5-title{
	 		flex: 1.5;
	 		font-size: 12px;
	 		color: rgba(140, 151, 157, 1);
	 		text-align: left;
	 		white-space: nowrap;
	 		text-overflow:ellipsis;
	 	}
	 	 .shop-call-select3-title{
	 		background: rgba(243, 247, 250, 1);
	 		height: 14px;
	 		border-radius: 5px;
	 		width: 60px;
	 	 	font-size: 14px;
	 		line-height: 14px;
	 	 	color: rgba(0, 178, 255, 1);
	 		text-align: left;
	 		padding: 3px;
	 	 }
	 	 .shop-call-select3-txt{
	 		background: rgba(243, 247, 250, 1);
	 		height: 14px;
	 		border-radius: 5px;
	 		width: 60px;
	 		font-size: 14px;
	 		line-height: 14px;
	 		color: rgba(0, 178, 255, 1);
	 		text-align: left;
	 		padding: 3px;
	 	 }
	 	
	 	.shop-scroll-view_H-tab3{
	 		padding-top: 4px;
	 		flex: 1;
	 		margin-left: 10px;
	 		margin-right: 10px;
	 		
	 	}
	 	 
	 	.shop-scroll-view_H-tab3 image{
	 		height: 26px;
	 		width: 26px;
	 		
	 	}
	 	
	 	
	 	.aa{
	        transition: all 1s;
	    }
	    .go{
	        transform:rotate(-180deg);
	        transition: all 1s;
	    }
	 	.call-select2{
	 		margin-right: 10px;
	 		font-size: 13px;
	 	}
	 	 
	 	.scroll-view_H-tab3-call-3-label-1{
	 		display: flex;
	 		width: 100%;
	 		margin-left: 10px;
	 		margin-right: 10px;
	 	}
	 	 
	 
	 	.type-image-name{
	 		width: 50px;
	 		display: flex;
	 		text-align: left;
	 		justify-content: center;
	 		flex-direction: column;
	 		font-weight: bold;
	 		
	 	
	 	}
	 	.type-image-name2{
	 
	 		flex: 4;
	 		display: flex;
	 		text-align: right;
	 		justify-content: center;
	 		flex-direction: column;
	 		margin-right: 10px;
	 		color: rgba(204, 204, 204, 1);
	 	
	 	}
	 	 
	 	.call-times{
	 		flex: 2;
	 		display: flex;
	 		text-align: left;
	 		justify-content: center;
	 		flex-direction: column;
	 		color: rgba(204, 204, 204, 1);
	 	}
	 
	 
	 	 
	 	 .shop-center {
	 		height: 120px;
	 		margin-bottom: 10px;
	 		margin-left: 10px;
	 		margin-right: 10px;
	 		margin-top: 10px;
	 		 
	 		display: flex;
	 		background-color: #FFF;
	 		border-radius: 5px 5px 5px 5px;
	 	}
	 	 
	 	 
	 	 
	 	.page{
	 		width: 100%;
	 		font-size: 13px;
	 		font-weight: 400;
	 		letter-spacing: 0px;
	 		line-height: 20px;
	 		 
	 	 }
	 
	 	.tabs{
	 		height: 96px;
	 		text-align: center;
	 		margin-left: 20px;
	 		margin-right: 20px;
	 		display: flex;
	 		z-index: 9;
	 	}
	 	.tabs-label{
	 		text-align: center;
	 		margin-left: 20px;
	 		margin-right: 20px;
	 		margin-top: 15px;
	 		height: 30px;
	 		display: flex;
	 		font-weight: bold;
	 		margin-left: 30%;
	 		margin-right: 30%;
	 	}
	 	.tab{
	 		flex: 1;
	 		text-align: center;
	 		background-color: white;
	 
	 	}
	 	.tab2{
	 		flex: 1;
	 		text-align: center;
	 		background-color: white;
	 		 border-radius: 5px 0px 0px 5px;
	 	 
	 	}
	 	
	 
	 	.scroll-view_H-tab2{
	 		flex: 1;
	 		text-align: center;
	 		background-color: white;
	 		 border-radius: 5px 0px 0px 5px;
	 
	 	}
	 	.scroll-view_H-tab2 image{
	 		border-radius: 5px 5px 5px 5px;
	 		height: 120px;
	 		width: 130px;
	 		margin-top:10px;
	 	}
	 
	 
	 	 
	 	.tab3{
	 		flex: 1;
	 		text-align: center;
	 		background-color: white;
	 		border-radius: 0px 5px 5px 0px;
	 	 
	 	}
	 	.tab image{
	 		border-radius: 5px 5px 5px 5px;
	 		height: 50px;
	 		width: 50px;
	 		margin-top:10px;
	 	}
	 	 .tab label{
	 		color: black;
	 	 	height: 10px;
	 	 	width: 50px;
	 	 }
	 	 
	 	 
	 	 .tab2 image{
	 	 	border-radius: 5px 5px 5px 5px;
	 	 	height: 50px;
	 	 	width: 50px;
	 	 	margin-top:10px;
	 	 }
	 	.tab3 image{
	 		border-radius: 5px 5px 5px 5px;
	 		height: 50px;
	 		width: 50px;
	 		margin-top:10px;
	 	}
	 	.content{
	 		display: flex;
	 	}
	 	 
	 	 
	 	 .uni-margin-wrap{
	 		 
	 		width: 100%;
	 		height: 200px;
	 			 
	 	 }
 
 
	 	
	 .shop-images{
	 	text-align: center;
	 	background-color: white;
	 	border-radius: 5px 0px 0px 5px;
	 	padding-top: 4px;
	 	flex: 0.5;
	 	position: relative;
	 	
	 }
	 
	 
	 
	 
	 .shop-icon-image{
	 	 
	 	border-radius: 5px 5px 5px 5px;
	 	flex: 2;
	 	text-align: left;
	 	justify-content: center;
	 	flex-direction: column;
	 	font-weight: bold;
	 	width:100%;
	 	height: 110px;
	  
	 }
	  
	 
	 
	 
	 
	 
	 
 
	
</style>
